<template>
  <el-card class="container-card">
    <el-steps :active="active" align-center>
      <el-step
        title="提交申请"
        description="请如实提交企业认证所需要的材料"
      ></el-step>
      <el-step title="等待审核" description="等待系统管理员审核"></el-step>
      <el-step title="审核结果"></el-step>
    </el-steps>

    <div class="step-one" v-show="active == 1">
      <el-card>
        <el-alert
          title="您还没有上传企业资质"
          type="info"
          close-text="知道了"
          style="margin-bottom: 10px"
        ></el-alert>
        <el-form
          label-width="190px"
          :rules="rules"
          ref="authenticationInfo"
          :model="authenticationInfo"
          class="authenticationInfoData"
        >
          <el-form-item label="企业名称：" prop="ename">
            <el-input
              placeholder="请与贵公司营业执照注册名称保持一致"
              v-model="authenticationInfo.ename"
            ></el-input>
          </el-form-item>
          <el-form-item label="统一社会信用代码：">
            <el-input
              placeholder="请填写统一社会信用代码"
              v-model="authenticationInfo.Sid"
            ></el-input>
          </el-form-item>
          <el-form-item label="营业执照：">
            <span style="color: gray">
              营业执照需是在有效期范围内的原件照片，扫描或者加盖公章的复印件，若无营业执照可上传组织机构代码证
            </span>
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              list-type="picture-card"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
      </el-card>

      <el-button
        size="medium"
        round
        type="primary"
        style="width: 20%; margin-left: 400px; margin-top: 20px"
        @click="next"
      >
        提交申请
      </el-button>
    </div>
    <div class="step-two" v-show="active == 2">
      <el-image
        class="waitingImage"
        src="https://s2.loli.net/2021/12/22/sAho4aKQMTe3Nfm.gif"
      ></el-image>
      <div class="app-container">
        <h2>已提交申请，等待审核中</h2>
        <b style="color: gray">如有疑问，请联系管理员5555-88888888</b>
      </div>
    </div>
    <div class="step-three" v-show="active == 3">
      <span>审核通过，企业认证成功</span>
    </div>
    <div class="step-three" v-show="active == 4">
      审核不通过，请重新检查审核材料
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      active: 1,
      authenticationInfo: {
        ename: "",
        Sid: "",
      },
    };
  },
  rules: {
    ename: [{ required: true, message: "请填写企业全称", trigger: "change" }],
    Sid: [
      { required: true, message: "请填写统一社会信用代码", trigger: "change" },
    ],
  },
  components: {},
  methods: {
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #000000;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.container-card {
  margin: 13px;
  height: 640px;
}
.step-one {
  margin: 20px 0;
  padding: 20px 0;
}

.step-two {
  margin: 20px 0;
  padding: 20px 0;
}

.step-three {
  margin: 20px 0;
  padding: 20px 0;
}
.app-container {
  position: absolute;
  left: 38%;
}

.waitingImage {
  left: 35%;
  width: 350px;
  height: 350px;
}
</style>